<template>
  <div class="input-box">
    <SearchArea
      v-model="params"
      :config="searchAreaConfig"
      btnRenderMode="in"
      :cols="{
        xs: 24,
        sm: 24,
        md: 12,
        lg: 8,
        xl: 8,
      }"
      @handleSearch="handleSearch"
      @handleReset="handleReset"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useSearchAreaConfig, SearchArea } from '..';

const originParams = {
  styleCode1: '',
  styleCode2: '',
  styleCode3: '',
  styleCode4: '',
  styleCode5: '',
  settlementName: '121212',
  settlementCode: '',
  settlementId: '',
  accountName: '',
  accountNo: '',
  createStartTime: '2023-08-01 22:22:22',
  createEndTime: '2023-08-08 22:22:22',
};
const params = ref({
  ...originParams,
});

const { searchAreaConfig } = useSearchAreaConfig<typeof params.value>(() => [
  {
    label: '内部款号5',
    component: 'input',
    prop: 'styleCode2',
    placeholder: '请输入款号',
  },
  // {
  //   labelWidth: '0',
  //   component: 'keySelectInput',
  //   props: {
  //     options: [
  //       {
  //         label: '客户名称',
  //         value: 'settlementName',
  //       },
  //       {
  //         label: '客户编码',
  //         value: 'settlementCode',
  //         placeholder: '批量搜索客户编码'
  //       },
  //       {
  //         label: '客户ID',
  //         value: 'settlementId',
  //       },
  //       {
  //         label: '账户名',
  //         value: 'accountName',
  //       },
  //       {
  //         label: '卡号',
  //         value: 'accountNo',
  //       },
  //     ],
  //   },
  // },
  // {
  //   labelWidth: '0',
  //   component: 'keySelectDatePicker',
  //   props: {
  //     options: [
  //       {
  //         label: '创建时间',
  //         value: ['createStartTime', 'createEndTime'],
  //       },
  //       {
  //         label: '预计到货时间',
  //         value: ['arrivalStartTime', 'arrivalEndTime'],
  //       },
  //     ],
  //     datePickerProps: {
  //       disabledDate: (time: Date) => {
  //         return time.getTime() > new Date().getTime();
  //       },
  //     },
  //     selectWidth: '130px'
  //   },
  // },
  {
    label: '内部款号5',
    component: 'input',
    prop: 'styleCode3',
    placeholder: '请输入款号',
  },
  {
    label: '内部款号5',
    component: 'input',
    prop: 'styleCode4',
    placeholder: '请输入款号',
  },
  {
    label: '内部款号5',
    component: 'input',
    prop: 'styleCode5',
    placeholder: '请输入款号',
  },
]);

const handleSearch = () => {
  console.log(params.value, 'handleSearch');
};

const handleReset = () => {
  params.value = { ...originParams };
  console.log(params.value, 'handleReset');
};
</script>

<style lang="scss" scoped>
.input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin-top: 10px;

  .title {
    width: 60px;
  }
}
</style>
